<template>
  <!-- 新建弹框 -->
  <el-dialog
    :title="dialogTitle"
    :visible="showAddDialog"
    width="40%"
    style="font-weight: 700;"
    @close="closeFn"
  >
    <el-form ref="addForm" :model="region" label-width="130px">
      <el-form-item prop="name" aria-placeholder="请输入" label="点位名称">
        <el-input
          v-model="region.name"
          placeholder="请输入"
          maxlength="15"
          show-word-limit
          style="width:380px"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item prop="regionId" label="所在区域">
        <el-select v-model="region.regionId" clearable style="width:380px" placeholder="请选择">
          <el-option
            v-for="item in aera"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />

        </el-select>
      </el-form-item>
      <el-form-item prop="businessId" label="所属商圈">
        <el-select v-model="region.businessId" clearable style="width:380px" placeholder="请选择">
          <el-option
            v-for="item in businessType"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="partnerid" label="归属合作商">
        <el-select v-model="region.partnerid" clearable style="width:380px" placeholder="请选择" @change="changePartner">
          <el-option
            v-for="item in partner"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />

        </el-select>
      </el-form-item>
      <!-- 详细地址 -->
      <el-form-item label="详细地址">
        <el-cascader
          v-model="addressSelections"
          :options="addressData"
          :disabled="false"
          style="width:380px"
          placeholder="请选择省市区"
          @change="handleAddress"
        />
      </el-form-item>
      <el-form-item prop="remark">
        <el-input
          v-model="region.remark"
          type="textarea"
          :rows="3"
          style="width:380px"
          placeholder="请输入详细地址"
          maxlength="60"
          show-word-limit
        />
      </el-form-item>
      <el-form-item>
        <el-row type="flex" justify="center">
          <el-col :span="14">
            <el-button class="cancle" @click="closeFn">取消</el-button>
            <el-button class="cofirm" type="warning" style="margin-left: 34px" @click="submitFn">确认</el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import {
  regionData,
  CodeToText,
  TextToCode } from 'element-china-area-data'
import { getAreaList, getbusinessType, getPartner, addNode, modifyNode } from '@/api/node'
export default {
  props: {
    showAddDialog: Boolean,
    row: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      // rules: {
      //   regionName: [{ required: true, message: '区域名称名称不能为空', trigger: 'blur' }],
      //   remark: [{ required: true, message: '备注说明不能为空', trigger: 'blur' }]
      // },
      // res: '',
      // 表单
      region: {
        name: '',
        areaid: '',
        businessId: '',
        partnerid: '',
        remark: ''
      },
      pageParams: {
        pageIndex: 1,
        pageSize: 100000,
        name: ''
      },
      aera: [], // 区域
      businessType: {}, // 商圈类型
      partner: [], // 合作商
      addressData: regionData,
      addressSelections: [],
      addNodeForm: {
        areaCode: ''
      },
      adda: '',
      ownerName: []
    }
  },
  computed: {
    addR() {
      return `${this.adda}-${this.region.remark}`
    },
    dialogTitle() {
      return `${this.region.id ? '修改' : '新增'}点位`
    }
  },
  created() {
    this.getAreaList()
    this.getbusinessType()
    this.getPartner()
  },
  methods: {
    changeRegion() {
      // console.log(this.row)
      this.region = this.row
      this.region.partnerid = this.row.ownerId
      // '330000', '330100', '330104'
      // console.log(this.row.addr.split('-').slice(0, 3))
      // this.row.addr.split('-').slice(0, 3).forEach(item => {
      //   this.addressSelections.push(TextToCode[item])
      // })
      this.addressSelections = [TextToCode[this.row.addr.split('-').slice(0, 1)].code, TextToCode[this.row.addr.split('-').slice(0, 1)][this.row.addr.split('-').slice(1, 2)].code, TextToCode[this.row.addr.split('-').slice(0, 1)][this.row.addr.split('-').slice(1, 2)][this.row.addr.split('-').slice(2, 3)].code]
      this.region.remark = this.row.addr.split('-').pop()
    },
    handleAddress(val) {
      this.addNodeForm.areaCode = val[2]
      // console.log(val)
      this.adda = `${CodeToText[val[0]]}-${CodeToText[val[1]]}-${CodeToText[val[2]]}`
      console.log(this.adda)
    },
    changePartner() {
      this.ownerName = this.partner.find(item => item.id === this.region.partnerid)
      // console.log(this.ownerName.name)
      // console.log(this.ownerName)
    },
    async getPartner() {
      const res = await getPartner(
        this.pageParams.pageIndex,
        this.pageParams.pageSize
      )
      this.partner = res.currentPageRecords
      // console.log(this.partner)
    },
    async getbusinessType() {
      const res = await getbusinessType()
      // console.log(res) // 商圈列表
      this.businessType = res
    },
    async getAreaList() {
      const res = await getAreaList(
        this.pageParams.pageIndex,
        this.pageParams.pageSize,
        this.pageParams.name
      )
      // console.log(res)
      this.aera = res.currentPageRecords
      // console.log(this.aera)
    },
    closeFn() {
      this.$emit('update:showAddDialog', false)
      // 清空所有数据
      this.region = {
        addr: '',
        businessId: '',
        createUserId: '',
        id: '',
        name: '',
        ownerId: '',
        ownerName: '',
        partnerid: '',
        regionId: '',
        remark: ''
      }
      this.addressSelections = []
    },
    async submitFn() {
      if (!this.region.id) {
        await addNode({
          addr: this.addR,
          areaCode: this.addNodeForm.areaCode,
          businessId: this.region.businessId,
          createUserId: 1,
          name: this.region.name,
          ownerId: this.region.partnerid,
          ownerName: this.ownerName.name,
          regionId: this.region.regionId
        })
        this.$message.success('新增成功')
      } else {
        await modifyNode(this.region.id, {
          addr: this.addR,
          areaCode: this.addNodeForm.areaCode,
          businessId: this.region.businessId,
          createUserId: 1,
          name: this.region.name,
          ownerId: this.region.partnerid,
          ownerName: this.ownerName.name,
          regionId: this.region.regionId
        })
        this.$message.success('修改成功')
      }
      this.$emit('addNode')
      this.closeFn()
    }
  }
}
</script>

<style>
.cancle {
    width: 80px!important;
    height: 36px;
    padding: 0;
    background-color: #fbf4f0!important;
    border: none;
    color: #655b56!important;
    border-radius: 5px;
  }
  .cofirm{
    width: 80px!important;
    height: 36px;
    padding: 0;
    background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
    border: none;
    border-radius: 5px;
  }
</style>
